<template>

	<view v-if="countdown <= 60 && countdown > 0"
		style="margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100vh; overflow: hidden;">
		<image class="images-huiyuan"
			src="https://preview.qiantucdn.com/auto_machine/20240112/fa3d5795-d357-4823-aaf9-c37ba98d2e45.jpg!qt_w320_webp">
		</image>
		<view class="tiaoguo" @click="goindex">
			跳过
		</view>
	</view>

	<view v-else-if="countdown === 0" style="background-color: #faf5e3;">
		<view>
			<imgsBanner-tag :imgList='imgLists' autoplay=true duration='500' interval="5000" :currentImg='currentImg'
				:isShowSmallImgs='false' customizeDisplayField='url' @change='onChange'></imgsBanner-tag>
		</view>
		<!-- 	<view class="open-card">
			<!-- 标题部分 -->
		<!-- <view class="header">
				<view class="title-large">今日开馆</view>
				<view class="date">{{ monthDay }}月{{ Day }}日</view>
			</view>

			<!-- 图文展示部分 -->
		<!-- 	<view class="options">
				<view class="option-card red-card" @click="goTicketBooking">
					<view class="option-text">购票预约</view>
					<view class="option-subtext">参观需提前预约</view>
				</view>
				<view class="option-cards map-card" @click="goMapGuide">
					<view class="option-text">地图导览</view>
					<view class="option-subtext">《深度游览》</view>
				</view>
			</view>
		</view> -->
		<view class="section white">
			<view class="item" @click="gopeifangyuanliao">
				<view class="icon">
					<image src="https://zjdemo.xuande.work:8889/photo/ab0456849a834d6a9d48cc8bbd5faaec.png"
						class="icon-img"></image>
				</view>
				<view class="text">地方景点</view>
			</view>
			<view class="item" @click="gopeifangyuanliao">
				<view class="icon">
					<image src="https://zjdemo.xuande.work:8889/photo/a4c7b4ddf0b64b9a94bd9c7897a8cebc.png"
						class="icon-img"></image>
				</view>
				<view class="text">地方服饰</view>
			</view>

			<view class="item" @click="goZhiKa">
				<view class="icon">
					<image src="https://zjdemo.xuande.work:8889/photo/e942d056d03c436382c1c9c0162af70c.png"
						class="icon-img"></image>
				</view>
				<view class="text">地方住宿</view>
			</view>
			<view class="item">
				<view class="icon">
					<image src="https://zjdemo.xuande.work:8889/photo/1ad2d844e1224df4bbeffef9c2fa2692.png"
						class="icon-img" @click="goYaoqingyouyli"></image>
				</view>
				<view class="text">游玩攻略</view>
			</view>

		</view>
		<view class="section white">

			<view class="item" @click="goZhiKa">
				<view class="icon">
					<image src="https://zjdemo.xuande.work:8889/photo/5fccd94bdb094d8da7b698539cec20e5.png"
						class="icon-img"></image>
				</view>
				<view class="text">地方饮食</view>
			</view>
			<view class="item">
				<view class="icon">
					<image src="https://zjdemo.xuande.work:8889/photo/08e17ce9e7614e03bf6abe0dbfb0712f.png"
						class="icon-img" @click="goYaoqingyouyli"></image>
				</view>
				<view class="text">山水城市</view>
			</view>
			<view class="item" @click="huodongzhongxin">
				<view class="icon">
					<image src="https://zjdemo.xuande.work:8889/photo/b23928ce21c74636884bc925a4c2dc00.png"
						class="icon-img"></image>
				</view>
				<view class="text">我的收藏</view>
			</view>
			<view class="item" @click="huodongzhongxin">
				<view class="icon">
					<image src="https://zjdemo.xuande.work:8889/photo/54707c54ca8d45f59e8adbced45c3278.png"
						class="icon-img"></image>
				</view>
				<view class="text">我的会员</view>
			</view>
		</view>
		<view>
			<view class="header">
				<text class="titles">精彩推荐</text>
				<text class="more">全部 ></text>
			</view>
			<piaoyiSwiper :imgList="imgList" :itemMargin="30" :autoplay="false" :interval="3000" :duration="1000" />
		</view>
		<view class="page-wrapper">
			<!-- 顶部标题 -->
			<view class="page-title">山水新鲜事</view>

			<!-- 新闻项容器 -->
			<view class="news-grid">
				<!-- 第一条新闻 -->
				<view class="news-card">
					<image class="news-thumb"
						src="https://zjdemo.xuande.work:8889/photo/e60964f6b5c0462586f231d2dfd33633.jfif"
						mode="aspectFill" />
					<view class="news-tag">最新</view>
					<view class="news-heading">
						#让我们一起来读日历# 清康熙，千叟宴诗。千...
					</view>
					<view class="news-source">山水非遗文化</view>
				</view>

				<!-- 第二条新闻 -->
				<view class="news-card">
					<image class="news-thumb"
						src="https://zjdemo.xuande.work:8889/photo/e60964f6b5c0462586f231d2dfd33633.jfif"
						mode="aspectFill" />
					<view class="news-tag">最新</view>
					<view class="news-heading">
						#每日山水#，今夜的晚安来自顾绣花鸟草虫图...
					</view>
					<view class="news-source">山水非遗文化</view>
				</view>
				<view class="news-card">
					<image class="news-thumb"
						src="https://zjdemo.xuande.work:8889/photo/e60964f6b5c0462586f231d2dfd33633.jfif"
						mode="aspectFill" />
					<view class="news-tag">最新</view>
					<view class="news-heading">
						#每日山水#，今夜的晚安来自顾绣花鸟草虫图...
					</view>
					<view class="news-source">山水非遗文化</view>
				</view>
				<!-- 第三条新闻 -->
				<view class="news-card">
					<image class="news-thumb"
						src="https://zjdemo.xuande.work:8889/photo/e60964f6b5c0462586f231d2dfd33633.jfif"
						mode="aspectFill" />
					<view class="news-heading">
						#每日山水#，山水中秋盛典回顾...
					</view>
					<view class="news-source">山水非遗文化</view>
				</view>
			</view>
		</view>
	</view>
	<!-- <view class="containers" style="margin-bottom: 74px;">
		<view class="banner">
			<jerry-banner :imgList="bannerList"></jerry-banner>
			
		</view>
	</view> -->

</template>

<script>
	import {
		demo
	} from '../demo/demo.vue';
	import piaoyiSwiper from '@/components/piaoyi-swiper/piaoyi-swiper.vue';
	import {
		url
	} from '@/utils/request.js';
	import {
		jerrybanner
	} from '@/components/jerry-banner/jerry-banner.vue'
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app';
	export default {
		components: {
			piaoyiSwiper,
			demo
		},
		data() {
			return {
				monthDay: '',
				countdown: 2,
				Day: '',
				imgLists: [{
						url: 'https://zjdemo.xuande.work:8889/photo/e60964f6b5c0462586f231d2dfd33633.jfif'
					},
					{
						url: 'https://zjdemo.xuande.work:8889/photo/a8bceb2706854d4488c357c23058b36f.jfif'
					},
					{
						url: 'https://zjdemo.xuande.work:8889/photo/29e7a91032f44d5e8d26cc1caca777b0.jfif'
					}
				],
				imgList: [
					'https://bpic.588ku.com/illus_water_img/21/02/01/7a0c6fb4e2842b635dccbc56ca8f1514.jpg!/fw/750/quality/99/unsharp/true/compress/true',
					'https://mz2.eastday.com/images/17297855/56cddfc96c8145889ed53b2a44cce9fb.jpeg',
					'https://img2.gujianchina.cn/201905/08/141817456876.png',
				],
				bannerList: [{
						"image": "https://trade-marketing-prod-oss.pin-dao.cn/product/1704211685315.png",
						"fileType": 1,
						"floorImage": "https://trade-marketing-prod-oss.pin-dao.cn/product/1704211687589.png",
						"name": "阿胶奶茶",
						"route": "nayuki://pindao.cn/shopMenu/shopMenu?groupId=40335"
					}

					,
					{
						"image": "https://trade-marketing-prod-oss.pin-dao.cn/product/1703728667971.png",
						"fileType": 1,
						"floorImage": "https://trade-marketing-prod-oss.pin-dao.cn/product/1703728670590.png",
						"name": "年报",
						"route": "nayuki://pindao.cn/annualReport/index/index?ari=419&cnc=CESg8779aH7"
					}

					,
					{
						"image": "https://trade-marketing-prod-oss.pin-dao.cn/product/1703604583350.png",
						"fileType": 1,
						"floorImage": "https://trade-marketing-prod-oss.pin-dao.cn/product/1703604585521.png",
						"name": "霸气车厘子",
						"route": "nayuki://pindao.cn/shopMenu/shopMenu?groupId=40332"
					}

					,
					{
						"image": "https://trade-marketing-prod-oss.pin-dao.cn/product/1702998538046.png",
						"fileType": 1,
						"floorImage": "https://trade-marketing-prod-oss.pin-dao.cn/product/1702998539698.png",
						"name": "超厚芋泥",
						"route": "nayuki://pindao.cn/shopMenu/shopMenu?groupId=40328"
					}

					,
					{
						"image": "https://trade-marketing-prod-oss.pin-dao.cn/product/1702636984635.png",
						"fileType": 1,
						"floorImage": "https://trade-marketing-prod-oss.pin-dao.cn/product/1702636986446.png",
						"name": "八香主k",
						"route": "nayuki://pindao.cn/shopMenu/shopMenu?groupId=40307"
					}

					,
					{
						"image": "https://trade-marketing-prod-oss.pin-dao.cn/product/1694428645178.png",
						"fileType": 1,
						"floorImage": "https://trade-marketing-prod-oss.pin-dao.cn/product/1694428648907.png",
						"name": "周一免配日",
						"route": "nayuki://pindao.cn/shopMenu/shopMenu?cnc=CESr5QL3aY8"
					}

					,
					{
						"image": "https://trade-marketing-prod-oss.pin-dao.cn/product/1704357922534.png",
						"fileType": 1,
						"floorImage": "https://trade-marketing-prod-oss.pin-dao.cn/product/1704357927974.png",
						"name": "储值有礼",
						"route": "nayuki://pindao.cn/userCenter/memberRecharge?cnc=CESFIN4KaMP"
					}

					,
					{
						"image": "https://trade-marketing-prod-oss.pin-dao.cn/product/1704373238984.png",
						"fileType": 1,
						"floorImage": "https://trade-marketing-prod-oss.pin-dao.cn/product/1704373242613.png",
						"name": "全国社群入群礼",
						"route": "https://wxh5.icc.link/lbs/?id=1742846572695326722&unique=e2a185aa25c1183c#/?icc=1"
					}

				],
				userName: '',
				currentIndex: 0,
				currentImg: 0, //默认展示
				swipers: [
					'https://zjdemo.xuande.work:8889/photo/5fc0c54a368246a99cf4d6aee05af061.png',
					'https://zjdemo.xuande.work:8889/photo/24b9fbd02bc641f49c6bd8cbf0c3ffb0.png',
				],
				swiperImgs: [{
					index: 1,

					underImg: "https://pic.imgdb.cn/item/668d0603d9c307b7e9145580.png"
				}, {
					index: 2,

					underImg: "https://pic.imgdb.cn/item/668d0603d9c307b7e91455b8.png"
				}, {
					index: 3,

					underImg: "https://pic.imgdb.cn/item/668be071d9c307b7e91446fe.jpg"
				}, {
					index: 4,
					underImg: "https://pic.imgdb.cn/item/668d0604d9c307b7e9145616.png",

				}, {
					index: 5,
					underImg: "https://pic.imgdb.cn/item/668d0604d9c307b7e914565f.png",

				}],
				underImgList: [],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 1000,
				current: 0,
				autoplays: true,
				intervals: 3000
			};
		},
		onLoad() {
			uni.hideTabBar();
			let interval = setInterval(() => {
				this.countdown--;
				if (this.countdown === 0) {
					clearInterval(interval);
					uni.showTabBar(); // 显示 tabbar
				}

			}, 1000);
			const timestamp = Date.now();

			// 将时间戳转换为Date对象
			const date = new Date(timestamp);

			// 获取年、月、日、时、分、秒
			const year = date.getFullYear();
			const month = date.getMonth() + 1;
			const day = date.getDate();
			const hours = date.getHours();
			const minutes = date.getMinutes();
			const seconds = date.getSeconds();
			this.monthDay = month
			this.Day = day
			// 输出结果
			console.log(`当前时间：${year}-${month}-${day} ${hours}:${minutes}:${seconds}`);
		},
		methods: {
			onChange(item, index) {
				console.log(item)
				console.log(index)
			},
			selectedBanner(item, index) {
				console.log('🥒', item, index)
			},
			change(e) {
				console.log('==========', e)
			},
			//点击轮播
			click(e) {
				console.log('点击轮播', e)
			}
		}
	};
</script>

<style lang="scss">
	.open-card {
		background-color: #f2eadb;
		border-radius: 12px;
		padding: 20rpx;
		margin: -54px 15px 0px 15px;
		position: relative;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 10rpx;
	}

	.title-large {
		font-size: 36rpx;
		font-weight: bold;
		padding: 5px;
		color: #4a3f36;
	}

	.date {
		font-size: 26rpx;
		color: #7a6b60;
	}

	.options {
		display: flex;
		gap: 10rpx;
		justify-content: space-between;
	}

	.option-card {
		width: 30%;
		margin-right: 6px;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
		border-radius: 12px;
		height: 180rpx;
		color: #ffffff;
		font-weight: bold;
		text-align: center;
	}

	.option-cards {
		width: 60%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
		border-radius: 12px;
		height: 180rpx;
		color: #ffffff;
		font-weight: bold;
		text-align: center;
	}

	.red-card {
		background-color: #b7372d;
		// background-image: url('path/to/red-card-icon.png');
		background-size: 60% auto;
		background-repeat: no-repeat;
		background-position: bottom;
	}

	.map-card {
		background-color: #f0e4d2;
		color: #4a3f36;
		// background-image: url('path/to/map-card-icon.png');
		background-size: 60% auto;
		background-repeat: no-repeat;
		background-position: bottom;
	}

	.option-text {
		font-size: 28rpx;
		margin-bottom: 8rpx;
	}

	.option-subtext {
		font-size: 22rpx;
	}

	.page-wrapper {
		display: flex;
		flex-direction: column;
		align-items: revert;
		padding: 20rpx;
		background-color: #faf5e3;
	}

	.page-title {
		font-size: 18px;
		color: #3a3a3a;
		font-family: '宋体';
		margin-bottom: 20rpx;
	}

	.news-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
	}

	.news-card {
		position: relative;
		width: 48%;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
		background-color: #faf5e3;
		height: 144px;
	}

	.news-thumb {
		width: 100%;
		border-radius: 6px;
		height: 72px;
	}

	.images-huiyuan {
		width: 100vw;
		height: 100vh;
		object-fit: cover;
		/* Ensures the image maintains its aspect ratio */

	}

	.tiaoguo {
		position: absolute;
		top: 120px;
		right: 20px;
		padding: 4px;
		width: 58px;
		text-align: center;
		border-radius: 25px;
		opacity: 0.7;
		color: white;
		background-color: black;
	}

	.news-tag {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		background-color: #e94f2e;
		color: #ffffff;
		padding: 5rpx 10rpx;
		font-size: 24rpx;
		border-radius: 5rpx;
	}

	.news-heading {
		font-size: 28rpx;
		color: #333333;
		margin: 10rpx;
	}

	.news-source {
		font-size: 24rpx;
		color: #888888;
		margin: 0 10rpx 10rpx 10rpx;
	}

	.header {
		// margin-top: 10px;
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	.titles {
		font-size: 18px;
		padding: 10px;
		font-family: '宋体';
		letter-spacing: 1px;
		color: #3c3c3c;
	}

	.more {
		padding: 16px;
		font-size: 14px;
		color: #5a5a5a;
	}

	.banner {
		position: relative;
		width: 100%;
		// height: 466px;
	}

	.section {
		padding: 10px;
		// margin-bottom: 10px;
	}

	.yellow {
		background-color: white;
		display: flex;
		justify-content: space-between;
	}

	.title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.description {
		font-size: 14px;
		color: #666;
	}

	.white {
		background-color: #faf5e3;
		display: flex;
		justify-content: space-between;
		padding: 10px 0;
		// border-radius: 8px;
		margin: 0 8px;
	}

	.item {
		flex: 1;
		text-align: center;
		margin: 0 5px;
	}

	.item.large {
		flex: 2;
	}

	.item.small {
		flex: 1;
	}

	.icon {
		margin-bottom: 5px;
	}

	.icon-img {
		width: 52px;
		height: 52px;
	
	}

	.icon-imgs {
		width: 43px;
		height: 43px;
	}

	.text {
		font-size: 12px;
	}

	.beige {
		background-color: #f5f5dc;
		display: flex;
		justify-content: space-between;
		padding: 10px 0;
	}

	.green {
		background-color: #dff0d8;
		text-align: center;
		padding: 20px;
	}

	.center {
		font-size: 16px;
		font-weight: bold;
	}

	// .container {
	// 	display: flex;
	// 	flex-direction: row;
	// 	gap: 20rpx;
	// }

	.left-column {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	.right-column {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 20rpx;
	}

	.box {
		height: 200rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.boxs {
		width: 350rpx;
		height: 459rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.invite {
		background-color: #f2ead5;
	}

	.join-group {
		background-color: #f4ddcd;
	}

	.happy-money {
		background-color: #e0e6da;
	}

	.title {
		font-size: 24rpx;
		font-weight: bold;
	}

	.description {
		font-size: 20rpx;
	}

	.cover-view {
		position: absolute;
		top: 356px;
		left: 50px;
		padding: 10px;
		z-index: 10;
		color: white;
	}

	.qm-banner-underImg {
		position: absolute;
		left: 50%;
		transform: translate(-50%);
	}

	.uperUderImg {
		width: 100%;
		height: 100%;
	}

	.aaaa {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		width: 100%;
		height: 100%;
		transform: translate(0%, 0) translateZ(0);
		transition: 1s;
	}
</style>